<template>
 <div class="recommend">
     <div class="recommend-item" v-for="(item,index) of recommends" :key="index">
         <a :href="item.link">
             <img :src="item.image" @load="imageLoad">
             <div>{{item.title}}</div>
         </a>
     </div>
 </div>
</template>

<script>
 export default {
   name:'RecommendView',
   props:{
       recommends:{
           type:Array
       }
   },
    methods:{
     imageLoad(){
       this.$emit('imageLoad')
     }
   }
 }
</script>

 
<style scoped>
 .recommend{
    display: flex;
    text-align: center;
    font-size:13px;
    padding:10px 0 25px;
    border-bottom: 10px solid #eee;
 }
 .recommend-item{
     flex:1
 }
 .recommend-item img{
     max-width: 100%;
     padding:5px 2px;
    
 }
 
</style>
